<template>
    <div class="plr20">
        <div class="p20 table-striped">
            <el-button
                class="pb20"
                type="primary"
                icon="el-icon-plus"
                size="mini"
                v-hasPermi="['system:post:add']"
                @click="showAddDialog"
                >新增</el-button
            >
            <div>
                <el-table :data="list">
                    <el-table-column
                        type="selection"
                        width="55"
                        align="center"
                    />
                    <el-table-column
                        label="证件名"
                        align="center"
                        prop="certName"
                    />
                    <el-table-column
                        label="证件编号"
                        align="center"
                        prop="certNumber"
                    />
                    <el-table-column
                        label="发证机构"
                        align="center"
                        prop="issueOrg"
                    />
                    <el-table-column
                        label="发证日期"
                        align="center"
                        prop="issueDate"
                    />
                    <el-table-column
                        label="失效日期"
                        align="center"
                        prop="expireDate"
                    />
                    <el-table-column
                        label="操作"
                        align="center"
                        class-name="small-padding fixed-width"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:post:edit']"
                                >编辑</el-button
                            >
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="
                                    deleteCertificateInfo(scope.row.certinfoId)
                                "
                                v-hasPermi="['system:post:remove']"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="pageNum"
                    :limit.sync="pageSize"
                    @pagination="getCertificateInfo"
                />
            </div>
        </div>
        <el-dialog
            :title="title"
            :before-close="closeDialog"
            :visible.sync="open"
            width="640px"
            append-to-body
        >
            <el-form
                ref="ruleForm"
                :model="form"
                :rules="rules"
                label-width="130px"
            >
                <el-form-item label="证件名称" prop="certName">
                    <el-input
                        v-model="form.certName"
                        placeholder="请输入证件名称"
                    />
                </el-form-item>
                <el-form-item label="证件编号" prop="certNumber">
                    <el-input
                        v-model="form.certNumber"
                        placeholder="请输入证件编号"
                    />
                </el-form-item>
                <el-form-item label="发证机构" prop="issueOrg">
                    <el-input
                        v-model="form.issueOrg"
                        placeholder="请输入发证机构"
                    />
                </el-form-item>
                <el-form-item label="证件照片">
                    <el-upload
                        ref="upload1"
                        :action="uploadUrl"
                        :headers="headers"
                        :limit="limitImgNumber"
                        accept=".png, .jpg"
                        :file-list="fileList"
                        list-type="picture-card"
                        :on-remove="removeFile"
                        :on-success="handleFileSuccess"
                        :on-change="handleFileChange"
                        :class="{ hideAdd: uploadDisabled }"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="发证时间" prop="issueDate">
                    <el-date-picker
                        style="width:100%;"
                        value-format="yyyy-MM-dd"
                        type="date"
                        v-model="form.issueDate"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="有效期截止时间">
                    <el-date-picker
                        style="width:100%;"
                        value-format="yyyy-MM-dd"
                        type="date"
                        v-model="form.expireDate"
                    ></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('ruleForm')"
                    >确 定</el-button
                >
                <el-button @click="closeDialog('close')">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { certificateInfo, addCertificateInfo, deleteCertificateInfo, modifiCertificateInfo } from '@/api/users'
export default {
    name: 'certificateInfo',
    data () {
        return {
            uploadDisabled: false,
            limitImgNumber: 3,
            title: '添加证件信息',
            open: false,
            headers: { Authorization: "Bearer " + getToken() },
            uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
            form: {
                userId: '',
                certName: '', // 证件名称
                certNumber: '', // 证件编号
                issueOrg: '', // 发证单位
                certImg: [], // 证件照片
                issueDate: '', // 发证日期
                expireDate: '' // 失效日期
            },
            rules: {
                certName: [
                    { required: true, message: "请输入证件名称", trigger: ['blur'] }
                ],
                certNumber: [
                    { required: true, message: "请输入证件编号", trigger: ['blur'] }
                ],
                issueOrg: [
                    { required: true, message: "请输入发证单位", trigger: ['blur'] }
                ],
                issueDate: [
                    { required: true, message: "请输入选择发证日期", trigger: ['blur'] }
                ]
            },
            list: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            fileList: [],
            isAddUserPost: true // 是新增还是修改
        }
    },
    created () {
        this.form.userId = this.$route.params.id
        this.getCertificateInfo()
    },
    methods: {
        handleFileChange (file, fileList) {
            this.uploadDisabled = fileList.length >= this.limitImgNumber;
        },
        closeDialog (done) {
            this.$refs.upload1.clearFiles()
            done && done != 'close' ? done() : this.open = false
        },
        showAddDialog () {
            this.title = "添加证件信息"
            this.open = true
            this.isAddUserPost = true
            this.form = {
                userId: this.$route.params.id,
                certName: '', // 证件名称
                certNumber: '', // 证件编号
                issueOrg: '', // 发证单位
                certImg: [], // 证件照片
                issueDate: '', // 发证日期
                expireDate: '' // 失效日期
            }
            this.fileList = []
            this.uploadDisabled = false
        },
        handleUpdate (row) {
            this.title = "编辑证件信息"
            this.open = true
            this.isAddUserPost = false
            this.form = row;
            this.fileList = [];
            if (row.photos[0] == null) {
                return false
            }
            row.photos.forEach(item => {
                this.fileList.push({
                    url: item.attaPath
                })
            })
            this.uploadDisabled = this.fileList.length >= this.limitImgNumber;
        },
        async getCertificateInfo () {
            let res = await certificateInfo({ userId: this.$route.params.id })
            if (res.code == 200) {
                this.list = res.rows
                this.total = res.total
            }
        },
        removeFile (file, fileList) {
            this.form.certImg = [];
            fileList.forEach(item => {
                let url = item.response ? item.response.url : item.url;
                this.form.certImg.push(url);
            });
            setTimeout(() => {
                this.handleFileChange(file, fileList)
            }, 500)
        },
        // 文件上传成功处理
        handleFileSuccess (response, file, fileList) {
            this.form.certImg = [];
            fileList.forEach(item => {
                let url = item.response ? item.response.url : item.url;
                this.form.certImg.push(url);
            });
        },
        submitForm (formName) {
            this.form.photos = [];
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.isAddUserPost) {
                        this.addCertificateInfo()
                    } else {
                        this.modifiCertificateInfo()
                    }
                } else {
                    return false;
                }
            });
        },
        async addCertificateInfo () {
            let res = await addCertificateInfo(this.form)
            if (res.code == 200) {
                this.fileList = []
                this.$refs.upload1.clearFiles()
                this.open = false
                this.$message({
                    message: '新增成功',
                    type: 'success'
                })
                this.getCertificateInfo()
            }
        },
        async deleteCertificateInfo (id) {
            let res = await deleteCertificateInfo(id)
            if (res.code == 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                this.getCertificateInfo()
            }
        },
        async modifiCertificateInfo () {
            let res = await modifiCertificateInfo(this.form)
            if (res.code == 200) {
                this.fileList = []
                this.$refs.upload1.clearFiles()
                this.open = false
                this.$message({
                    message: '修改成功',
                    type: 'success'
                })
                this.getCertificateInfo()
            }
        }
    }
}
</script>
<style scoped>
.plr20 {
    padding: 0 20px;
}
.p20 {
    padding: 20px;
}
.pb20 {
    margin-bottom: 20px;
}
.table-striped {
    width: 100%;
    background: #fff;
    border-radius: 6px;
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 13px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
</style>
